<template>
    <div class="login">
        <div class="login-content">
            <h2>登录账号</h2>
            <p class="desc">虾米 - 严选商城欢迎您</p>
            <my-input v-model="form.mobile" :class="show ? 'warn' : (show === false) ? 'success': ''" @blur="blur" placeholder="手机号码">
                <template #msg>
                    <span class="msg" v-show="show">必填</span>
                </template>
                <van-icon class="login-icon" name="desktop-o" />
            </my-input>
            <my-input :type="pwdtype" @blur="regPwd" v-model="form.pwd" :class="showPwd ? 'warn' : (showPwd === false) ? 'success': ''" placeholder="密码">
                <template #msg>
                    <span class="msg" v-show="showPwd">必填</span>
                </template>
                <van-icon class="login-icon" @click="changePwdType" :name="pwdName" />
            </my-input>

            <div class="login-btn" @click="loginBtn">登录</div>
            <router-link to="/register" v-slot="{navigate}">
                <p class="reset-pwd" @click="navigate">忘记密码</p>
            </router-link>
            <router-link to="/register" v-slot="{navigate}">
                <p class="go-login" @click="navigate">还没有注册？ 立即注册</p>
            </router-link>
        </div>
    </div>
</template>

<script>
import myInput from '@/components/myInput/myInput'
import { reactive, toRefs, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { login } from '@/api'
export default {
    components: {
        myInput
    },
    setup() {
        // 验证手机号码的正则表达式
        let regMobile = /^1[356789]\d{9}$/
        let state = reactive({
            form: {
                mobile: '',
                pwd: ''
            },
            pwdName: 'closed-eye',
            pwdtype: 'password',
            show: null,
            showPwd: null
        })

        // 改变密码类型的方法
        function changePwdType() {
            if(state.pwdtype == "password") {
                state.pwdtype = 'text'
                state.pwdName = 'eye-o'
            } else {
                state.pwdtype = "password"
                state.pwdName = 'closed-eye'
            }
        } 

        // 当输入框失去焦点时
        function blur() {
            // console.log('失去焦点了')
            if(!regMobile.test(state.form.mobile)) {
                state.show = true
            } else {
                state.show = false
            }
        }
        let router = useRouter()
        let route = useRoute()
        // 登录
        function loginBtn() {
            login(state.form.mobile, state.form.pwd).then(res => {
                // console.log(res)
                localStorage.setItem('token', res.data.token)
                // console.log(route)
                if(route.params.url) {
                    router.push({
                        path: route.params.url,
                        query: {
                            id: route.params.id,
                            show: true
                        }
                    })
                } else {
                    router.push('/profile')
                }
                
            })
        }
        function regPwd() {
            if(!state.form.pwd) {
                state.showPwd = true
            } else {
                state.showPwd = false
            }
        }
        return {
            ...toRefs(state),
            changePwdType,
            blur,
            loginBtn,
            regPwd
        }
    }
 }
</script>

<style scoped lang="scss">
.login {
    background-color: #fff;
    height: 100%;
    padding: 30px;
    overflow: auto;
    h2 {
        font-size: 50px;
        margin: 60px 0;
    }
    .desc {
        color: #888;
        line-height: 40px;
        font-size: 28px;
        margin-bottom: 30px;
    }
    .login-content {
        border: 1px solid #f5f5f5;
        padding: 30px 80px;
        font-size: 30px;
        height: 100%;
    }
    .login-icon {
        color: #888;
        margin-right: 20px;
    }
    .code-img {
        height: 100%;
        width: 300px;
    }
    .code {
        font-size: 26px;
        flex-basis: 400px;
        height: 100%;
        border-left: 1px solid #ccc;
        text-align: center;
        line-height: 90px;
    }
    .login-btn {
        width: 462px;
        height: 90px;
        margin: 0 auto;
        margin-top: 40px;
        color: #fff;
        background-image: linear-gradient(90deg, #bb87f6, #5ea6f8);
        text-align: center;
        line-height: 90px;
        border-radius: 10px;
        margin-bottom: 50px;
    }
    .go-login {
        text-align: center;
        color: #549ff9;
    }
    .reset-pwd {
        text-align: center;
        color: #333;
        font-size: 24px;
        margin-bottom: 40px;
    }
    .msg {
    width: 50px;
    flex-shrink: 0;
    font-size: 24px;
    color: #d00000;}
    .warn {
    border: 1px solid #d00000;
    background-color: rgb(255, 233, 228);
    }
    .success {
    border: 1px solid green;
    background-color: yellowgreen;
    }
}
</style>